<template>
<!--  -->
  <div>
    <!-- 标题开始 -->
    <div class="header">
      <van-nav-bar title="频道管理" left-arrow @click-left="onClickLeft" />
    </div>
    <!-- 标题结束 -->

    <!-- 标签删除开始 -->
    <p>点击删除以下频道</p>
    <div class="selected">
      <van-tag
        @click="changeSelectState(item.id)"
        v-for="item in getSelectedCate"
        plain
        size="large"
        :key="item.id"
        >{{ item.cateName }}</van-tag
      >
    </div>
    <!-- 标签删除结束 -->

    <!-- 标签添加开始 -->
    <p>点击添加以下频道</p>
    <div class="selected">
      <van-tag
        @click="changeSelectState(item.id)"
        v-for="item in getUnSelectedCate"
        plain
        size="large"
        :key="item.id"
        >{{ item.cateName }}</van-tag
      >
    </div>
    <!-- 标签添加结束 -->
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(["getData"]),
    ...mapMutations(["changeState"]),
    onClickLeft() {
      this.$router.back();
    },
    changeSelectState(id) {
      this.changeState(id);
    },
  },
  computed: {
    ...mapGetters(["getSelectedCate", "getUnSelectedCate"]),
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang='scss' scoped>
.header {
  .van-nav-bar {
    background-color: #d2691e;
    /deep/ .van-nav-bar__content {
      height: 40px;
      .van-nav-bar__left {
        .van-icon {
          color: #ffffff;
        }
      }
      /deep/ .van-nav-bar__title {
        color: #ffffff;
        font-size: 20px;
      }
    }
  }
}
p {
  padding: 20px;
  color: #999999;
}
.selected {
  padding: 0px 20px;
  .van-tag {
    margin: 12px 9px;
  }
}
</style>